<!-- 分类系列 -->
<template>
    <div class="page-content">
        <div class="instruction-detail">
            <div class="title">{{ detail.title }}</div>
            <div>
                <van-cell
                    v-for="(item, index) in detail.videoList"
                    :title="index + 1 + '.' + item.name"
                    :key="index"
                    is-link
                    :border="false"
                    :to="`/video/1`"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    const detail = ref({
        title: '如意系列',
        videoList: [
            { url: 'https://www.w3school.com.cn/i/movie.ogg', name: '如意系列1' },
            { url: 'https://www.w3school.com.cn/i/movie.ogg', name: '如意系列2' },
        ],
    });
</script>

<style lang="scss" scoped>
    .instruction-detail {
        overflow: hidden;
        background-color: #fff;
        border-radius: $border-radius;

        .title {
            padding: 30px;
            font-weight: bold;
        }

        .van-cell {
            border-top: $border-dashed;
        }
    }
</style>
